<template>
	<!-- 预约详情 -->
	<view>
		<u-navbar id="nav" :bgColor="bgColor" title="活动详情" :autoBack="true" :titleStyle="titleStyle"
			leftIconColor="#fff">

		</u-navbar>
		<view class="bgV">
			<scroll-view style="height: 100%;" scroll-y="true" @scroll="onListenerScroll">
				<view class="topIv">
					<u-swiper :list="bookingData.images" :autoplay="true" indicatorStyle="right: 20px" height="450rpx"
						radius="0" circular>
					</u-swiper>
				</view>

				<view class="centerV">
					<view class="titleV">
						<view class="titleTv">{{bookingData.title}}</view>
					</view>
					<view class="timeV">
						<!-- <image class="timeIv" src="../../static/public/me.svg"></image> -->
						<view class="timeTv">描述：{{bookingData.describe}}</view>
					</view>
					<view class="gpsV">
						<!-- <image class="gpsIv" src="../../static/public/time.svg"></image> -->
						<view class="gpsTv">时间：{{bookingData.time}}</view>
					</view>
					<view v-if="bookingData.status==1" class="gpsV">
						<!-- <image class="gpsIv" src="../../static/public/gps.svg"></image> -->
						<view class="gpsTv">{{bookingData.address}}</view>
						<view class="mapV" @click="onMapClick(bookingData)">
							<!-- <image class="mapIv" src="../../static/public/ditu.svg"></image> -->
							<view class="mapTv">地图</view>
						</view>
						<!-- <view class="mapV" @click="onGpsClick()">
							<image class="mapIv" src="../../static/public/jiaotong.svg"></image>
							<view class="mapTv">交通</view>
						</view> -->
					</view>
					<view class="jieshaoV">
						<view class="jieshaoTitle">课程介绍</view>
						<view class="jieshaoTv">{{bookingData.content}}</view>
					</view>
					<!-- <view class="jieshaoV">
						<view class="jieshaoTv">{{bookingData.xuzhi}}</view>
					</view> -->
					<!-- <view class="jieshaoV">
						<view class="jieshaoTitle">课程须知</view>
						<view class="jieshaoTv">{{bookingData.xuzhi}}</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
		<view class="bottomV">
			<view v-if="bookingData.status==0" class="addOreder" @click="onSingClick()">参与活动</view>
			<view v-if="bookingData.status!=0" class="addOrederTo">{{bookingData.status_text}}</view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="topV">
					<view class="titleV">
						<image class="iv" src=""></image>
						<view class="pupTitleTv">评价</view>
						<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
					</view>
					<view class="srlV">
						<scroll-view style="height: 800rpx;" scroll-y="true">
							<view class="typeV">
								<view class="typeTv">1、专业能力</view>
								<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false"
									v-model="major"></uni-rate>
							</view>
							<view class="typeSubTv">（理论知识、专业技能、流程熟练）</view>

							<view class="typeV">
								<view class="typeTv">2、服务意识</view>
								<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false"
									v-model="service"></uni-rate>
							</view>
							<view class="typeSubTv">（用心、关注、保护、氛围调动、鼓励、互动）</view>

							<view class="typeV">
								<view class="typeTv">3、沟通表达</view>
								<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false"
									v-model="talk"></uni-rate>
							</view>
							<view class="typeSubTv">（耐心倾听、解惑、课中课后交流、回复速度）</view>

							<view class="typeV">
								<view class="typeTv">4、职业形象</view>
								<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false"
									v-model="profile"></uni-rate>
							</view>
							<view class="typeSubTv">（身材管理、商务礼仪）</view>

							<view class="typeV">
								<view class="typeTv">5、职业态度</view>
								<uni-rate activeColor="#CEF743" color="#4A4A4A" size="20" margin="4" :isFill="false"
									v-model="attitude"></uni-rate>
							</view>
							<view class="typeSubTv">（认真负责、积极主动、真诚、诚信）</view>

							<view class="typeV">
								<view class="typeTv">6、文字评价</view>
							</view>

							<view class="wenziV">
								<textarea class="textareaV" placeholder="请输入文字" v-model="content"></textarea>
								<view class="addImageV" @click="onAvatarToClick">
									<!-- <image v-if="image.length==0" class="addIv" src="../../static/public/xiangji.svg"> -->
									</image>
									<image v-if="image.length>0" class="addIvTo" :src="image"></image>
								</view>
							</view>

						</scroll-view>
					</view>
				</view>
				<view class="bottomV">
					<view class="bt2" @click="onConfirmClick">确认签课</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: null,
				bookingData: {
					images:[]
				},
				major: 5,
				service: 5,
				talk: 5,
				profile: 5,
				attitude: 5,
				content: "",
				image: "",
				value: 3,
				scrollTop: 0,
				bgColor: "#00000000",
			}
		},
		onReady() {
			let hei = uni.getSystemInfoSync().statusBarHeight;
			this.scrollTop = hei;
		},
		onLoad(op) {
			this.id = op.id;
			this.getSubscribeDetils()
			
			// uni.authorize({
			// 	scope: 'scope.userLocation',
			// 	success() {
			// 		uni.getLocation({
			// 			type: 'gcj02',
			// 			geocode: true, //设置该参数为true可直接获取经纬度及城市信息
			// 			success: function(res) {
			// 				console.log('当前位置的经度：' + res.longitude);
			// 				console.log('当前位置的纬度：' + res.latitude);
			// 				uni.setStorageSync("user_longitude", res.longitude);
			// 				uni.setStorageSync("user_latitude", res.latitude);
			// 			},
			// 			fail(res) {
			// 				console.log("定位失败--"+JSON.stringify(res))
			// 			}
			// 		});
			// 	},
			// 	fail() {
			// 		uni.showModal({
			// 			title: '未打开小程序定位',
			// 			content: '找不到您的位置，请开启定位',
			// 			confirmText: '开启定位',
			// 			showCancel: false,
			// 			success: (res) => {
			// 				if (res.confirm) {
			// 					uni.openSetting(); // 打开地图权限设置
			// 				}
			// 			}
			// 		});
			// 	}
			// })
		},
		methods: {
			onAvatarToClick() {
				let chat = this;
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						if (res.errMsg == "chooseImage:ok") {
							chat.image = res.tempFilePaths.toString();
						}
					}
				});
			},
			getSubscribeDetils() {
				// this.$api.getSubscribeDetils({
				// 	id: this.id,
				// }).then((res) => {
				// 	this.bookingData = res;
				// }).catch((e) => {})
				this.$api.getActivityDetail({
					id: this.id,
				}).then((res) => {
					
					this.bookingData = res.info;
					// console.log(this.bookingData.)
				}).catch((e) => {})
			},
			onSingClick() {
				// this.$refs.popup.open()
				this.$api.addActivity({
					id: this.id,
				}).then((res) => {
					console.log(res)
					this.getzhifu(res.order_id)
				}).catch((e) => {})
			},
			getzhifu(order_id){
				this.$api.ActivityPay({
					order_id:order_id,
				}).then((res) => {
					console.log(res)
					this.payOrder(res);
					// this.getzhifu(res.order_id)
				}).catch((e) => {})
			},
			payOrder(payData) {
				console.log('-----', payData)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("参与成功");
						this.getSubscribeDetils()
						// this.$refs.popup.close()
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onConfirmClick() {
				this.$api.getConfirmBooking({
					id: this.id,
					major: this.major,
					service: this.service,
					talk: this.talk,
					profile: this.profile,
					attitude: this.attitude,
					content: this.content,
					image: this.image,
				}).then((res) => {
					uni.$u.toast("签到成功");
					this.$refs.popup.close()
					this.getSubscribeDetils();
				}).catch((e) => {
					uni.$u.toast("签到失败");
				})
			},
			onListenerScroll: function(value) {
				// console.log("====" + value.detail.scrollTop)
				if (value.detail.scrollTop > this.scrollTop) {
					this.bgColor = "#111111"
				} else {
					this.bgColor = "#00000000"
				}
			},
			onMapClick(item){
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.openLocation({
							longitude: parseFloat(item.longitude),
							latitude: parseFloat(item.latitude),
							name:"",//位置名
							address:"",//详细地址
							success: function (res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
							},
							fail(res){
								console.log("====="+JSON.stringify(res))
							}
						});
					},
					fail() {
						uni.showModal({
							title: '未打开小程序定位',
							content: '找不到您的位置，请开启定位',
							confirmText: '开启定位',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.openSetting(); // 打开地图权限设置
								}
							}
						});
					}
				})
			},
			onGpsClick(){
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						
					},
					fail() {
						uni.showModal({
							title: '未打开小程序定位',
							content: '找不到您的位置，请开启定位',
							confirmText: '开启定位',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.openSetting(); // 打开地图权限设置
								}
							}
						});
					}
				})
			},
		}
	}
</script>


<style lang="scss">
	.bgV {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.topIv {
			width: 100%;
			height: 450rpx;
			background-color: #ff0000;
		}

		.centerV {
			width: 100%;
			height: 100%;
			flex: 1;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			z-index: 9;
			background-color: #111111;
			margin-bottom: 30rpx;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 50rpx;
				box-sizing: border-box;

				.titleTv {
					color: #e8e8e8;
					font-size: 36rpx;
					max-width: 450rpx;
					min-width: 450rpx;
				}

			}

			.timeV {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				// padding-left: 30rpx;
				padding-right: 30rpx;

				.timeIv {
					width: 30rpx;
					height: 30rpx;
				}

				.timeTv {
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}
			}

			.gpsV {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				// padding-left: 30rpx;
				padding-right: 10rpx;

				.gpsIv {
					width: 30rpx;
					height: 30rpx;
				}

				.gpsTv {
					flex: 1;
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}

				.mapV {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-left: 20rpx;
					padding-right: 20rpx;

					.mapIv {
						width: 32rpx;
						height: 32rpx;
					}

					.mapTv {
						margin-top: 1rpx;
						font-size: 24rpx;
						color: #8d8d8d;
					}
				}

			}



			.jieshaoV {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #1F1F1F;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.jieshaoTitle {
					color: #fff;
					font-size: 32rpx;
					padding-bottom: 30rpx;
				}

				.jieshaoTv {
					font-size: 28rpx;
					color: #8d8d8d;
				}

			}
		}
	}

	.bottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		z-index: 10;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;

		.addOreder {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF743;
			font-size: 32rpx;
			color: #333737;
			border-radius: 10rpx;
		}

		.addOrederTo {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #3D3F3E;
			font-size: 32rpx;
			color: #8A8A8A;
			border-radius: 10rpx;
		}
	}

	.popupBg {
		height: 1000rpx;

		.topV {
			height: 902rpx;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.pupTitleTv {
					font-size: 32rpx;
					color: #E8E8E8;
				}

				.iv {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.srlV {
				height: 800rpx;
				overflow: scroll;
				overflow-y: scroll;

				.typeV {
					display: flex;
					padding-left: 30rpx;
					margin-top: 30rpx;

					.typeTv {
						font-size: 32rpx;
						color: #E8E8E8;
						margin-right: 20rpx;
					}
				}

				.typeSubTv {
					font-size: 24rpx;
					color: #939393;
					margin-top: 11rpx;
					margin-left: 57rpx;
				}

				.wenziV {
					height: 380rpx;
					margin-top: 20rpx;
					background: #3D3F3E;
					border-radius: 10rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.textareaV {
						height: 200rpx;
						color: #fff;
					}

					.addImageV {
						width: 120rpx;
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #525654;

						.addIv {
							width: 60rpx;
							height: 55rpx;
						}

						.addIvTo {
							width: 120rpx;
							height: 120rpx;
						}
					}
				}
			}

		}

		.bottomV {
			display: flex;
			height: 98rpx;
			padding: 30rpx;

			.bt2 {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				background: #CEF743;
				border-radius: 10rpx;
				color: #333333;
				font-size: 32rpx;
			}
		}
	}
</style>
